<template>
	<div id="exceed">
		<div v-show="false">{{this.time}}</div>
		<div class="title">
			<div class="titleContainer">
				<div class="decoration"></div>
				<div class="titleText">跑赢<span v-text="exceed+'%'" class="exceedData"></span>资产相近股民</div>
				<div class="decoration"></div>
			</div>
		</div>
		<div v-show="module==0">
			<div class="chart">
				<img v-for="item in arr" :src="item">
			</div>
		</div>
		<return-error v-show="module==1"></return-error>
		<return-empty v-show="module==2"></return-empty>
	</div>
</template>
<script>
	import Title from '@/components/Title'
	import ImageOn from '@/assets/images/figure-blue.png'
	import ImageOff from '@/assets/images/figure-gray.png'
	import RemoteDAO from '@/common/remoteDAO'

	export default{
		props:['time'],
		data(){
			return {
				module:0,
				exceed:0,
				arr:[ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff]
			}
		},
		created(){
			this.initEvent();
		},
		watch:{
			time:function(){
				this.initEvent();
			}
		},
		methods:{
			initEvent(){
				this.module=0
				var self=this;
				var obj={"pagenum": "30","recent": this.time};
				RemoteDAO.callZL13100040(obj,self.ZL13100040);
			},
			ZL13100040(result){
				if(result.error=='1'){
					this.module=1
					this.exceed=0;
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.module=2
						this.exceed=0;
					}
					else{
						this.arr=[ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff,ImageOff];
						this.exceed=specData[0]._source.profit_index.toFixed(2);
						var number=Math.ceil(this.exceed/10);
						this.arr.splice(0,number);
						for(let i=0;i<number;i++){
							this.arr.unshift(ImageOn);
						}
					}
				}
			}
		},
		components:{
			'component-title':Title
		}
	}
</script>
<style scoped>
	#exceed{
		margin-top: 0.3rem;
	}
	.chart{
		height: 0.3rem;
		line-height: 0.3rem;
		padding: 0.015rem 0;
		box-sizing: border-box;
		margin-top: 0.15rem;
		text-align: center;
		font-size: 0.1rem;
	}
	.chart img{
		height: 100%;
		padding: 0 0.03rem;
	}
	.title{
		height: 0.15rem;
		font-size: 0.12rem;
		color: #999;
		display: flex;
		justify-content: center;
	}
	.titleContainer{
		width: 2.4rem;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.decoration{
		width: 0.385rem;
		height: 2px;
		border-radius: 1px;
		background: #eee;
	}
	.exceedData{
		color: #eb333b;
	}
</style>